<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="account" label="账号">
            </el-table-column>
            <el-table-column prop="username" label="用户名称">
            </el-table-column>
            <el-table-column prop="" label="类型">
                <template #default="scope">
                    {{ scope.row.type == 1 ? "超级管理员" : scope.row.type == 2 ? "观察员" : "管理员" }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    {{ +scope.row.cTime }}
                </template>
            </el-table-column>
            <el-table-column label="更新时间">
                <template #default="scope">
                    {{ scope.row.uTime }}
                </template>
            </el-table-column>
            <el-table-column prop="desc" label="描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit"></el-button>
                    <el-button @click="del(scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { $GetAccListData, $DelAccount } from "@/api"
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { ElMessage } from 'element-plus'
// import FillterMixin from "@/mixins/FillterMixin"
export default defineComponent({
    name: 'AccList',
    setup() {
        const Data = reactive({
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                eui: '',
                online: 'all',
                agreement: '',
                data: ''
            },
            total: 1
        })
        onMounted(() => {
            getData()
        })
        const handleClick = (obj:any) => {
            console.log('编辑');
        }
        const getData = () => {
            $GetAccListData(Data.pageObj).then(res => {
                Data.tableData = res.data.data;
                Data.total = res.data.total;
            })
        }
        const del = (id: any) => {
            // this.$confirm('确认删除吗？', { type: 'warning' }).then(() => {
            $DelAccount({ id: id }).then(res => {
                if (res.data.msg == 'success') {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    getData()
                }
            })
            // })

        }
        return { ...toRefs(Data), handleClick, del }
    }
    // data() {
    //     return {
    //         tableData: [],
    //         pageObj: {
    //             currPage: 1,
    //             pageSize: 5,
    //             eui: '',
    //             online: null,
    //             agreement: '',
    //             data: null
    //         },
    //         total: 1
    //     };
    // },

    // mounted() {
    //     this.getData()
    // },
    // // mixins: [FillterMixin],

    // methods: {
    //     handleClick() { 
    //         console.log('编辑');
    //     },
    //     getData() {
    //         $GetAccListData(this.pageObj).then(res => {
    //             this.tableData = res.data.data;
    //             this.total = res.data.total;
    //         })
    //     },
    //     del(id) {
    //         this.$confirm('确认删除吗？', { type: 'warning' }).then(() => {
    //             $DelAccount({ id: id }).then(res => {
    //                 if (res.data.msg == 'success') {
    //                     this.$message.success('成功删除！');
    //                     this.getData()
    //                 }
    //             })
    //         })

    //     }
    // },
});
</script>

<style lang="less" scoped>
.el-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    align-items: center;
}
</style>